



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/blog/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/atom.xml" />
<link rel="alternate" type="application/json" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/blog/css/app.css?v=0.2.5">

  
  <meta name="keywords" content="少时诵诗书" />


<link rel="canonical" href="https://song-ruipeng.gitee.io/blog/2023/05/05/%E4%B8%89.Css/">



  <title>
CSS - 我的日志 |
Yume Shoka = 宋胖子</title>
<meta name="generator" content="Hexo 6.3.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
  <h1 itemprop="name headline">CSS
  </h1>
  
<div class="meta">
  <span class="item" title="创建时间：2023-05-05 09:21:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <span class="text">发表于</span>
    <time itemprop="dateCreated datePublished" datetime="2023-05-05T09:21:00+08:00">2023-05-05</time>
  </span>
</div>


          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/blog/" rel="start">Yume Shoka</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
        <ul>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclfb3vzhj20zk0m8wny.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipexj2jgzj20zk0m8b09.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipewkhf1zj20zk0m81kx.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipey0a334j20zk0m8qpt.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclwuom7cj20zk0m8dvn.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giph4lm9i7j20zk0m84qp.jpg"></li>
        </ul>
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="article wrap">
    
<div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<i class="ic i-home"></i>
<span><a href="/blog/">首页</a></span><i class="ic i-angle-right"></i>
<span  class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="item" rel="index" title="分类于 我的日志"><span itemprop="name">我的日志</span></a>
<meta itemprop="position" content="1" /></span>
</div>

    <article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN">
  <link itemprop="mainEntityOfPage" href="https://song-ruipeng.gitee.io/blog/2023/05/05/%E4%B8%89.Css/">

  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="image" content="/blog/images/avatar.jpg">
    <meta itemprop="name" content="宋胖子">
    <meta itemprop="description" content=", 欢迎大家一起交流">
  </span>

  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="宋胖子">
  </span>

  <div class="body md" itemprop="articleBody">
    

    <h3 id="三css"><a class="markdownIt-Anchor" href="#三css">#</a> 三.CSS</h3>
<h3 id="31-介绍一下盒模型"><a class="markdownIt-Anchor" href="#31-介绍一下盒模型">#</a> 3.1 <strong>介绍一下盒模型？</strong></h3>
<h6 id="答"><a class="markdownIt-Anchor" href="#答">#</a> 答:</h6>
<pre><code>css3有两种盒模型:标准盒模型，IE盒模型（怪异盒模型）
</code></pre>
<p><img data-src="https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/20200715170108916.png" alt="image"><br>
<img data-src="https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/20200715170121834.png" alt="image"><br>
（1）盒模型由四部分组成：margin,padding,border,content<br>
<strong> 标准盒模型和 IE 盒模型的区别在于设置 width 和 height 时，所对应的范围不同：</strong></p>
<ul>
<li>标准盒模型的属性范围 width 和 height 只包括 content</li>
<li>IE 盒模型的属性范围 width 和 height 包括了 padding，border 和 content</li>
</ul>
<h6 id="可以通过box-sizing的属性来改变元素的盒模型"><a class="markdownIt-Anchor" href="#可以通过box-sizing的属性来改变元素的盒模型">#</a> 可以通过 box-sizing 的属性来改变元素的盒模型：</h6>
<ul>
<li>box-sizing：content-box 表示标准盒模型（默认）</li>
<li>box-sizing：border-box 表示 IE 盒模型（怪异盒模型）</li>
</ul>
<h3 id="32-margin-和-padding-的使用场景"><a class="markdownIt-Anchor" href="#32-margin-和-padding-的使用场景">#</a> 3.2 <strong>margin 和 padding 的使用场景</strong></h3>
<ul>
<li>需要在 border 外侧添加空白，且空白处不需要背景（色）时，使用 margin；</li>
<li>需要在 border 内测添加空白，且空白处需要背景（色）时，使用 padding。</li>
</ul>
<h3 id="33-rem-em-vw-vw-百分比区别"><a class="markdownIt-Anchor" href="#33-rem-em-vw-vw-百分比区别">#</a> 3.3 rem em vw vw 百分比区别</h3>
<ul>
<li>
<p>相同点：</p>
<ul>
<li>rem，m，vw，vh，vw 属于前端开发除了 px 单位之外的另外几种单位取值；但是具体含义存在区别</li>
</ul>
</li>
<li>
<p>不同点：</p>
<ul>
<li>
<p>px：是像素单位，属于绝对单位，是一个具体的大小</p>
</li>
<li>
<p>rem：相对于根元素进行设置</p>
</li>
<li>
<p>em：如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小设置，那么就相当于父元素进行设置。</p>
</li>
<li>
<p>vw：1vw 相当于浏览器窗口宽度的百分之一</p>
</li>
<li>
<p>vh：1vh 相当于浏览器窗口高度的百分之一</p>
</li>
<li>
<p>百分比：相对于父元素宽度或者高度的百分之几</p>
</li>
<li>
<p>注意：vw 和 vh 是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成 100vw 和 100% 的时候实现的效果一直；如果有滚动的话，则 100vw 中不是包括滚动条的，100% 是包括滚动条的距离的</p>
</li>
</ul>
 <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--注意里面的代码解释说明--&gt; </span><br><span class="line">&lt;style&gt;</span><br><span class="line">     *&#123;margin:0;padding:0&#125;</span><br><span class="line">     html,body&#123;</span><br><span class="line">         height: 100%;</span><br><span class="line">     &#125;</span><br><span class="line">     .box1&#123;</span><br><span class="line">         width: 100%;</span><br><span class="line">         height:500px;</span><br><span class="line">         background-color: red;</span><br><span class="line">     &#125;</span><br><span class="line">     .box2&#123;</span><br><span class="line">         width: 100vw;</span><br><span class="line">         height:500px;</span><br><span class="line">         background-color: green;</span><br><span class="line">     &#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;div class=&quot;box1&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;div class=&quot;box2&quot;&gt;&lt;/div&gt;750的设计图，20px为多少rem</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="4-bfc是什么清楚浮动的原理"><a class="markdownIt-Anchor" href="#4-bfc是什么清楚浮动的原理">#</a> 4、bfc 是什么，清楚浮动的原理</h3>
<ul>
<li>
<p>BFC 含义：</p>
<ul>
<li>块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域</li>
</ul>
</li>
<li>
<p>BFC 触发条件：</p>
<ul>
<li>根元素</li>
<li>float 属性不为 none（脱离文档流）<br>
注：脱离文档流：其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的</li>
<li>position 为 absolute 或 fixed</li>
<li>display 为 inline-block,table-cell,table-caption,flex,inline-flex</li>
<li>overflow 不为 visable</li>
</ul>
</li>
<li>
<p>BFC 布局规则:</p>
<ul>
<li>垂直方向上，自上而下排列，和文档流的排列方式一致。</li>
<li>在 BFC 中上下相邻的两个容器的 margin 会重叠</li>
<li>计算 BFC 的高度时，需要计算浮动元素的高度</li>
<li>BFC 区域不会与浮动的容器发生重叠</li>
<li>BFC 是独立的容器，容器内部元素不会影响外部元素</li>
<li>每个元素的左 margin 值和容器的左 border 相接触<br>
<strong> BFC 的作用：</strong></li>
</ul>
</li>
<li>
<p><strong>解决 margin 的重叠问题</strong>：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。</p>
</li>
<li>
<p><strong>解决高度塌陷的问题</strong>：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变成一个 BFC。常用的办法是给父元素设置 <code>overflow:hidden</code> 。</p>
</li>
<li>
<p><strong>创建自适应两栏布局</strong>：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。</p>
</li>
</ul>
<h3 id="5-两栏布局实现左固定右自定义"><a class="markdownIt-Anchor" href="#5-两栏布局实现左固定右自定义">#</a> 5、两栏布局实现（左固定右自定义）</h3>
<ul>
<li>1. 利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。</li>
</ul>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"> <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.outer</span> &#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> &#125;</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.left</span> &#123;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background</span>: tomato;</span></span><br><span class="line"><span class="language-css">   &#125;</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.right</span> &#123;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin-left</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: auto;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background</span>: gold;</span></span><br><span class="line"><span class="language-css"> &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>
<p>2. 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置 overflow: hidden; 这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。</p>
 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">  <span class="selector-class">.left</span>&#123;</span></span><br><span class="line"><span class="language-css">   <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">   <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css">   <span class="attribute">background</span>: red;</span></span><br><span class="line"><span class="language-css">   <span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="language-css"> &#125;</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.right</span>&#123;</span></span><br><span class="line"><span class="language-css">   <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css">   <span class="attribute">background</span>: blue;</span></span><br><span class="line"><span class="language-css">   <span class="attribute">overflow</span>: hidden;</span></span><br><span class="line"><span class="language-css">  &#125;</span></span><br><span class="line"><span class="language-css">   </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>3. 利用 flex 布局，将左边元素设置为固定宽度 200px，将右边的元素设置为 flex:1</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.outer</span> &#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="language-css"><span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-class">.left</span> &#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">background</span>: tomato;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-class">.right</span> &#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">flex</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">background</span>: gold;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>4. 利用绝对定位，将父级元素设置为相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.outer</span> &#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="language-css"><span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-class">.left</span> &#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css"><span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">background</span>: tomato;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-class">.right</span> &#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">margin-left</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">background</span>: gold;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。</li>
</ul>
 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.outer</span> &#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="language-css"><span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-class">.left</span> &#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">background</span>: tomato;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-class">.right</span> &#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css"><span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">right</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">bottom</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">left</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">background</span>: gold;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="水平垂直居中的实现"><a class="markdownIt-Anchor" href="#水平垂直居中的实现">#</a> 水平垂直居中的实现</h3>
</li>
<li>
<p>利用绝对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。该方法需要<strong>考虑浏览器兼容问题。</strong></p>
 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.parent</span> &#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-class">.son</span>&#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">position</span>:absolute;</span></span><br><span class="line"><span class="language-css"><span class="attribute">width</span>:<span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">height</span>:<span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">top</span>:<span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">left</span>:<span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">transform</span>:<span class="built_in">translate</span>(-<span class="number">50%</span>,-<span class="number">50%</span>)</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.parent</span>&#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">position</span>:relative;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-class">.son</span>&#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">position</span>:absolute;</span></span><br><span class="line"><span class="language-css"><span class="attribute">width</span>:<span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">height</span>:<span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">top</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">bottom</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">left</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">right</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">margin</span>:auto;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.parent</span>&#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">position</span>:relative;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"><span class="selector-class">.son</span>&#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">position</span>:absolute;</span></span><br><span class="line"><span class="language-css"><span class="attribute">width</span>:<span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">height</span>:<span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">top</span>:<span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">left</span>:<span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">margin-left</span>:-<span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"><span class="attribute">margin-top</span>:-<span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">&#125;  </span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.parent</span>&#123;</span></span><br><span class="line"><span class="language-css"><span class="attribute">display</span>:flex;</span></span><br><span class="line"><span class="language-css"><span class="attribute">align-items</span>:center;</span></span><br><span class="line"><span class="language-css"><span class="attribute">justify-content</span>:center;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="4-display的block-inline和inline-block的区别"><a class="markdownIt-Anchor" href="#4-display的block-inline和inline-block的区别">#</a> 4. display 的 block、inline 和 inline-block 的区别</h3>
<p>（1）<strong>block</strong> 会独占一行，多个元素会另起一行，可以设置 width、height、margin 和 padding 属性；</p>
<p>（2）<strong>inline</strong> 元素不会独占一行，设置 width、height 属性无效。但可以设置水平方向的 margin 和 padding 属性，不能设置垂直方向的 padding 和 margin；</p>
<p>（3）<strong>inline-block</strong> 将对象设置为 inline 对象，但对象的内容作为 block 对象呈现，之后的内联对象会被排列在同一行内。</p>
<h3 id="5-隐藏元素的方法有哪些"><a class="markdownIt-Anchor" href="#5-隐藏元素的方法有哪些">#</a> 5. 隐藏元素的方法有哪些</h3>
<ul>
<li><strong>display: none</strong>：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。</li>
<li><strong>visibility: hidden</strong>：元素在页面中仍占据空间，但是不会响应绑定的监听事件。</li>
<li><strong>opacity: 0</strong>：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。</li>
<li><strong>position: absolute</strong>：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。</li>
<li><strong>z-index: 负值</strong>：来使其他元素遮盖住该元素，以此来实现隐藏。</li>
<li><strong>clip/clip-path</strong> ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。</li>
<li><strong>transform: scale(0,0)</strong>：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。</li>
</ul>
<h3 id="8-displaynone与visibilityhidden的区别"><a class="markdownIt-Anchor" href="#8-displaynone与visibilityhidden的区别">#</a> 8. display:none 与 visibility:hidden 的区别</h3>
<p>这两个属性都是让元素隐藏，不可见。<strong>两者 **** 区别如下：</strong></p>
<p>（1）<strong>在渲染树中</strong></p>
<ul>
<li><code>display:none</code>  会让元素完全从渲染树中消失，渲染时不会占据任何空间；</li>
<li><code>visibility:hidden</code>  不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。</li>
</ul>
<p>（2）<strong>是否是 **** 继承属性</strong></p>
<ul>
<li><code>display:none</code>  是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；</li>
<li><code>visibility:hidden</code>  是继承属性，子孙节点消失是由于继承了 <code>hidden</code> ，通过设置 <code>visibility:visible</code>  可以让子孙节点显示；</li>
</ul>
<p>（3）修改常规文档流中元素的  <code>display</code>  通常会造成文档的重排，但是修改 <code>visibility</code>  属性只会造成本元素的重绘；</p>
<p>（4）如果使用读屏器，设置为 <code>display:none</code>  的内容不会被读取，设置为 <code>visibility:hidden</code>  的内容会被读取。</p>
<h3 id="14css3中有哪些新特性"><a class="markdownIt-Anchor" href="#14css3中有哪些新特性">#</a> 14.CSS3 中有哪些新特性</h3>
<ul>
<li>新增各种 CSS 选择器 (：not (.input)：class 不是 “input” 的节点)</li>
<li>圆角 (border-radius:8px)</li>
<li>多列布局 (multi-column layout)</li>
<li>阴影和反射 (Shadoweflect)</li>
<li>文字特效 (text-shaodow)</li>
<li>文字渲染 (text-decoration)</li>
<li>线性渐变 (gradient)</li>
<li>旋转 (transform)</li>
<li>增加了旋转，缩放，定位，倾斜，动画，多背景。</li>
</ul>
<h3 id="15flex布局"><a class="markdownIt-Anchor" href="#15flex布局">#</a> 15.flex 布局</h3>
<blockquote>
<p>flex 布局是 CSS3 新增的一种布局方式，可以通过将一个元素的 display 属性值设置为 flex 从而使它成为一个 flex 容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用 flex-direction 来指定主轴的方向。可以使用 justify-content 来指定元素在主轴上的排列方式，使用 align-items 来指定元素在交叉轴上的排列方式。还可以使用 flex-wrap 来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用 order 属性来指定项目的排列顺序，还可以使用 flex-grow 来指定当排列空间有剩余的时候，项目的放大比例，还可以使用 flex-shrink 来指定当排列空间不足时，项目的缩小比例。</p>
</blockquote>

      <div class="tags">
          <a href="/blog/tags/%E5%B0%91%E6%97%B6%E8%AF%B5%E8%AF%97%E4%B9%A6/" rel="tag"><i class="ic i-tag"></i> 少时诵诗书</a>
      </div>
  </div>

   <footer>

    <div class="meta">
  <span class="item">
    <span class="icon">
      <i class="ic i-calendar-check"></i>
    </span>
    <span class="text">更新于</span>
    <time title="修改时间：2023-08-09 15:05:46" itemprop="dateModified" datetime="2023-08-09T15:05:46+08:00">2023-08-09</time>
  </span>
</div>

      
<div class="reward">
  <button><i class="ic i-heartbeat"></i> 赞赏</button>
  <p>请我喝[茶]~(￣▽￣)~*</p>
  <div id="qr">
      
      <div>
        <img data-src="/blog/images/wechatpay.png" alt="宋胖子 微信支付">
        <p>微信支付</p>
      </div>
      
      <div>
        <img data-src="/blog/images/alipay.png" alt="宋胖子 支付宝">
        <p>支付宝</p>
      </div>
      
      <div>
        <img data-src="/blog/images/paypal.png" alt="宋胖子 贝宝">
        <p>贝宝</p>
      </div>
  </div>
</div>

      

<div id="copyright">
<ul>
  <li class="author">
    <strong>本文作者： </strong>宋胖子 <i class="ic i-at"><em>@</em></i>宋胖子
  </li>
  <li class="link">
    <strong>本文链接：</strong>
    <a href="https://song-ruipeng.gitee.io/blog/2023/05/05/%E4%B8%89.Css/" title="CSS">https://song-ruipeng.gitee.io/blog/2023/05/05/三.Css/</a>
  </li>
  <li class="license">
    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

  </footer>

</article>

  </div>
  

<div class="post-nav">
    <div class="item left">
      

  <a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" itemprop="url" rel="prev" data-background-image=" https:&#x2F;&#x2F;cancan-wx.oss-cn-hangzhou.aliyuncs.com&#x2F;bg&#x2F;6833939bly1gicljgocqbj20zk0m8e81.jpg" title="Event Loop">
  <span class="type">上一篇</span>
  <span class="category"><i class="ic i-flag"></i> 我的日志</span>
  <h3>Event Loop</h3>
  </a>

    </div>
    <div class="item right">
      

  <a href="/blog/2023/05/17/%E5%9B%9B.JS/" itemprop="url" rel="next" data-background-image=" https:&#x2F;&#x2F;cancan-wx.oss-cn-hangzhou.aliyuncs.com&#x2F;bg&#x2F;6833939bly1gipey84bjtj20zk0m8hdt.jpg" title="JS">
  <span class="type">下一篇</span>
  <span class="category"><i class="ic i-flag"></i> 我的日志</span>
  <h3>JS</h3>
  </a>

    </div>
</div>

  
  <div class="wrap" id="comments"></div>


        </div>
        <div id="sidebar">
          

<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
          <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89css"><span class="toc-number">1.</span> <span class="toc-text"> 三.CSS</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#31-%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%8B%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="toc-number">2.</span> <span class="toc-text"> 3.1 介绍一下盒模型？</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E7%AD%94"><span class="toc-number">2.0.0.1.</span> <span class="toc-text"> 答:</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87box-sizing%E7%9A%84%E5%B1%9E%E6%80%A7%E6%9D%A5%E6%94%B9%E5%8F%98%E5%85%83%E7%B4%A0%E7%9A%84%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="toc-number">2.0.0.2.</span> <span class="toc-text"> 可以通过 box-sizing 的属性来改变元素的盒模型：</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#32-margin-%E5%92%8C-padding-%E7%9A%84%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">3.</span> <span class="toc-text"> 3.2 margin 和 padding 的使用场景</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#33-rem-em-vw-vw-%E7%99%BE%E5%88%86%E6%AF%94%E5%8C%BA%E5%88%AB"><span class="toc-number">4.</span> <span class="toc-text"> 3.3 rem em vw vw 百分比区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-bfc%E6%98%AF%E4%BB%80%E4%B9%88%E6%B8%85%E6%A5%9A%E6%B5%AE%E5%8A%A8%E7%9A%84%E5%8E%9F%E7%90%86"><span class="toc-number">5.</span> <span class="toc-text"> 4、bfc 是什么，清楚浮动的原理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80%E5%AE%9E%E7%8E%B0%E5%B7%A6%E5%9B%BA%E5%AE%9A%E5%8F%B3%E8%87%AA%E5%AE%9A%E4%B9%89"><span class="toc-number">6.</span> <span class="toc-text"> 5、两栏布局实现（左固定右自定义）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84%E5%AE%9E%E7%8E%B0"><span class="toc-number">7.</span> <span class="toc-text"> 水平垂直居中的实现</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-display%E7%9A%84block-inline%E5%92%8Cinline-block%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">8.</span> <span class="toc-text"> 4. display 的 block、inline 和 inline-block 的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E9%9A%90%E8%97%8F%E5%85%83%E7%B4%A0%E7%9A%84%E6%96%B9%E6%B3%95%E6%9C%89%E5%93%AA%E4%BA%9B"><span class="toc-number">9.</span> <span class="toc-text"> 5. 隐藏元素的方法有哪些</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-displaynone%E4%B8%8Evisibilityhidden%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">10.</span> <span class="toc-text"> 8. display:none 与 visibility:hidden 的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#14css3%E4%B8%AD%E6%9C%89%E5%93%AA%E4%BA%9B%E6%96%B0%E7%89%B9%E6%80%A7"><span class="toc-number">11.</span> <span class="toc-text"> 14.CSS3 中有哪些新特性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#15flex%E5%B8%83%E5%B1%80"><span class="toc-number">12.</span> <span class="toc-text"> 15.flex 布局</span></a></li></ol>
      </div>
      <div class="related panel pjax" data-title="系列文章">
        <ul>
          <li><a href="/blog/2022/08/20/%E4%B9%9D.Vue/" rel="bookmark" title="vue总结">vue总结</a></li><li><a href="/blog/2023/04/18/%E5%8D%81.HTTP/" rel="bookmark" title="HTTP总结">HTTP总结</a></li><li><a href="/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/" rel="bookmark" title="计算机网络基础总结">计算机网络基础总结</a></li><li><a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" rel="bookmark" title="Event Loop">Event Loop</a></li><li class="active"><a href="/blog/2023/05/05/%E4%B8%89.Css/" rel="bookmark" title="CSS">CSS</a></li><li><a href="/blog/2023/05/17/%E5%9B%9B.JS/" rel="bookmark" title="JS">JS</a></li><li><a href="/blog/2023/06/12/%E4%BA%94.template/" rel="bookmark" title="Template">Template</a></li><li><a href="/blog/2023/07/03/%C2%A0%E5%85%AD.%E8%AF%BB%E6%BA%90%E7%A0%81%E7%90%86%E8%A7%A3Vnode/" rel="bookmark" title="读源码理解Vnode">读源码理解Vnode</a></li><li><a href="/blog/2023/07/18/%E4%B8%83.React/" rel="bookmark" title="React">React</a></li><li><a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" rel="bookmark" title="读《Vuejs设计与实现》总结">读《Vuejs设计与实现》总结</a></li><li><a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" rel="bookmark" title="React面试">React面试</a></li><li><a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" rel="bookmark" title="自测1">自测1</a></li><li><a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" rel="bookmark" title="Supense和异步组件解决首页白屏问题">Supense和异步组件解决首页白屏问题</a></li>
        </ul>
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="宋胖子"
      data-src="/blog/images/avatar.jpg">
  <p class="name" itemprop="name">宋胖子</p>
  <div class="description" itemprop="description">欢迎大家一起交流</div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/blog/archives/">
        <span class="count">13</span>
        <span class="name">文章</span>
      </a>
    </div>
    <div class="item categories">
      <a href="/blog/categories/">
        <span class="count">1</span>
        <span class="name">分类</span>
      </a>
    </div>
    <div class="item tags">
      <a href="/blog/tags/">
        <span class="count">1</span>
        <span class="name">标签</span>
      </a>
    </div>
</nav>

<div class="social">
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/blog/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>


</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
        <a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a>
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
        <a href="/blog/2023/05/17/%E5%9B%9B.JS/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a>
    </li>
    <li class="percent"></li>
  </ul>
</div>


        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" title="Supense和异步组件解决首页白屏问题">Supense和异步组件解决首页白屏问题</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/03/%C2%A0%E5%85%AD.%E8%AF%BB%E6%BA%90%E7%A0%81%E7%90%86%E8%A7%A3Vnode/" title="读源码理解Vnode">读源码理解Vnode</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" title="读《Vuejs设计与实现》总结">读《Vuejs设计与实现》总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/05/05/%E4%B8%89.Css/" title="CSS">CSS</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/06/12/%E4%BA%94.template/" title="Template">Template</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/18/%E5%8D%81.HTTP/" title="HTTP总结">HTTP总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/05/17/%E5%9B%9B.JS/" title="JS">JS</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/" title="计算机网络基础总结">计算机网络基础总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2022/08/20/%E4%B9%9D.Vue/" title="vue总结">vue总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" title="自测1">自测1</a></span>
  </li>

  </ul>
</div>
<div>
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment"></ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 2010 – 
    <span itemprop="copyrightYear">2023</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">宋胖子 @ Yume Shoka</span>
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '2023/05/05/三.Css/',
    favicon: {
      show: "（●´3｀●）やれやれだぜ",
      hide: "(´Д｀)大変だ！"
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: true,fancybox: true,
    copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/blog/js/app.js?v=0.2.5"></script>




</body>
</html>
